<template>
  <div>
    <filter-bar />
    <sui-divider />
    <vuetable :reactive-api-url="true" ref='vuetable' :api-url="apiUrl" :fields='fields' pagination-path='' @vuetable:pagination-data='onPaginationData' @vuetable:cell-clicked="onCellClicked" track-by="group_id" :append-params="moreParams">
      <template slot='actions' scope='props'>
        <div class='table-button-container'>
          <button class='ui button' @click.native='editRow(props.rowData)'><i class='fa fa-edit'></i> Edit</button>&nbsp;&nbsp;
          <button class='ui basic red button' @click.native='deleteRow(props.rowData)'><i class='fa fa-remove'></i> Delete</button>&nbsp;&nbsp;
        </div>
      </template>
      <template v-for="operationField in operationFields" :slot="operationField" slot-scope="props">
        <slot :name="`table-${operationField}`" :data="props"></slot>
      </template>
    </vuetable>
    <sui-divider />
    <vuetable-pagination ref='pagination' @vuetable-pagination:change-page='onChangePage'></vuetable-pagination>
    <sui-dropdown :value="20" selection :options="options" v-model="current" />
    <sui-modal v-model="open">
      <sui-modal-header>Select a Photo</sui-modal-header>
      <sui-modal-content image>
        <sui-image wrapped size="medium" src="static/images/avatar/large/rachel.png" />
        <sui-modal-description>
          <sui-header>Default Profile Image</sui-header>
          <p>We've found the following gravatar image associated with your e-mail address.</p>
          <p>Is it okay to use this photo?</p>
        </sui-modal-description>
      </sui-modal-content>
      <sui-modal-actions>
        <sui-button positive @click.native="toggle">
          OK
        </sui-button>
      </sui-modal-actions>
    </sui-modal>
  </div>
</template>
<script>
import Vue from "vue";
import { Vuetable, VuetablePagination } from "vuetable-2";
import FilterBar from "./FilterBar.vue";
export default {
  name: "v-table",
  props: {
    operationFields: {
      type: Array,
      default: () => []
    },
    apiUrl: {
      type: String,
      default: () => "https://vuetable.ratiw.net/api/users"
    },
    fields: {
      type: Array,
      default: () => [
        "name",
        "email",
        "birthdate",
        "nickname",
        "gender",
        "__slot:actions"
      ]
    }
  },
  components: {
    vuetable: Vuetable,
    "vuetable-pagination": VuetablePagination,
    FilterBar
  },
  data() {
    return {
      open: false,
      moreParams: {},
      current: null,
      options: [
        {
          text: "10 / Page",
          value: 10
        },
        {
          text: "20 / Page",
          value: 20
        },
        {
          text: "30 / Page",
          value: 30
        },
        {
          text: "40 / Page",
          value: 40
        }
      ]
    };
  },
  mounted() {},
  computed: {
    /*httpOptions(){
        return {headers: {'Authorization': "my-token"}} //table props -> :http-options="httpOptions"
      },*/
  },
  methods: {
    toggle() {
      this.open = !this.open;
    },
    onCellClicked(rowData) {
      this.toggle();
      //alert("You clicked cell on" + JSON.stringify(rowData));
    },
    onPaginationData(paginationData) {
      this.$refs.pagination.setPaginationData(paginationData);
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page);
    },
    editRow(rowData) {
      alert("You clicked edit on" + JSON.stringify(rowData));
    },
    deleteRow(rowData) {
      alert("You clicked delete on" + JSON.stringify(rowData));
    },
    onFilterSet(filterText) {
      this.moreParams = {
        name: filterText
      };
      Vue.nextTick(() => this.$refs.vuetable.refresh());
    },
    onFilterReset() {
      this.moreParams = {};
      Vue.nextTick(() => this.$refs.vuetable.refresh());
    }
  }
};
</script>
